<template>
	<div>
		<table>
			<thead>
				<tr>
					<td>操作</td>
					<td>序号</td>
					<td>名称</td>
					<td>分数</td>
				</tr>
			</thead>
			<tr v-for="(stu, index) in stus" :key="index">
				<td>
					<button v-on:click="remove(index)">删除</button>
					<button v-on:click="update(index)">修改</button>
				</td>
				<td>{{index + 1}}</td>
				<td>{{stu.name}}</td>
				<td v-bind:class="{'A':'red', 'B':'blue', 'C':'green', 'D':'darkcyan'}[stu.score]" style="background-color: #EEE;">{{stu.score}}</td>
			</tr>
		</table>

		<form onsubmit="return false;">
			<input type="text" name="name" v-model="stu.name" placeholder="姓名" /><br />
			<input type="text" name="score" v-model="stu.score" placeholder="成绩" />
			<button @click="add()">添加/修改</button>
		</form>
	</div>
</template>
<script>
	export default {
		data() {
				return {
					stus: [{
						name: 'jack',
						score: 'A'
					}, {
						name: 'rose',
						score: 'B'
					}, {
						name: '阿拉斯加',
						score: 'C'
					}, {
						name: '超级玛丽',
						score: 'D'
					}],
					stu: {
						name: '',
						score: ''
					}
				}
			},
			//属于组件
			methods: {
				remove(index) {
					this.stus.splice(index, 1);
				},
				add() {
					this.stus.push(this.stu);
					this.stu = {};
				},
				update(index){
					this.stu = this.stus[index];
				}
			}
	}
</script>
<style>
	html,
	body {
		font-family: "微软雅黑";
	}
	
	table {
		width: 600px;
		border-collapse: collapse;
	}
	
	table thead {
		background-color: dodgerblue;
		color: #FFF;
	}
	
	table tr {
		border-bottom: 1px solid #CCC;
		height: 30px;
	}
	
	.red {
		color: red;
	}
	
	.blue {
		color: blue;
	}
	
	.green {
		color: green;
	}
	
	.darkcyan {
		color: blueviolet;
	}
</style>